<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<title id="web_title">APP DOWNLOAD</title>
</head>

<body>
	<div class="bg">
		<div class="container">
			<div id="wechat" class="display">
				<p>
					<img src="./images/weixin.png" style="width: 99%" alt="微信打开" />
				</p>
			</div>
			<div id="alipay" class="display">
				<p>
					<img src="./images/weixin.png" style="width: 99%" alt="支付宝打开" />
				</p>
			</div>
			<h3 id="weclome">欢迎下载</h3>
			<p class="info">全新功能等你来体验</p>
			<p class="qrcode" style="display: none;"></p>
			<p class="app-icon"></p>
			<p class="app-name" id="app_name">APP Name</p>
			<p class="info"></p>
			<div class="system" id="iphone_download">
				<div class="iphone" id="iphone">
					<img src="images/svg/icon-iOS.svg" alt="iPhone" id="img_iphone" />
					<span id="name_iphone">iPhone</span>
				</div>
			</div>
			<div class="system" id="android_download">
				<div class="android" id="android">
					<img src="images/svg/icon-Android.svg" alt="Android" id="img_android" />
					<span id="name_android">Android</span>
				</div>
			</div>
			<div class="footer">
				<a class="submit-btn" id="submit-btn"> 点击下载 </a>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/config.js"></script>
	<script type="text/javascript">
		var userAgentInfo = navigator.userAgent.toLowerCase();
		console.log(userAgentInfo)
		var flag =
			userAgentInfo.indexOf("iphone") > -1 ||
				userAgentInfo.indexOf("ipad") > -1
				? true
				: false;
		//flag===false 表示android true表示ios
		if (flag == false) {
			//document.getElementById("iphone_download").style.display = "none";
			document.getElementById("android").style.border = "2px solid #05D569";
			document.getElementById("name_android").style.color = "#05D569";
			document.getElementById("img_android").src =
				"images/svg/icon-Android-sure.svg";
		} else {
			//document.getElementById("android_download").style.display = "none";
			document.getElementById("iphone").style.border = "2px solid #05D569";
			document.getElementById("name_iphone").style.color = "#05D569";
			document.getElementById("img_iphone").src =
				"images/svg/icon-iOS-sure.svg";
		}
		if (/micromessenger/i.test(userAgentInfo) == true) {
			//判断在安卓微信中打开，显示在浏览器中打开提示
			document.getElementById("wechat").style.display = "flex";
		} else if (/aliapp/i.test(userAgentInfo) == true) {
			//判断在安卓支付宝中打开，显示在浏览器中打开提示
			document.getElementById("alipay").style.display = "flex";
		} else {
			document.getElementById("weclome").style.marginTop = ".2rem";
		}
		if (document.body.clientWidth > document.body.clientHeight) {
			//横屏显示方法
			document.getElementById("android").style.marginBottom = "1rem"; //220px
		}
		var myConfig = getMyConfig();
		//console.log(myConfig)
		document.getElementById('web_title').innerHTML = myConfig.webTitle;
		document.getElementById('app_name').innerHTML = myConfig.appName;
		//使用ajax连接下载接口appurls
		var androidUrl = "";
		var iosUrl = "";
		window.onload = function () {
			//获取下载地址
			var appUrl = getAppUrl();
			console.log(appUrl);
			androidUrl = appUrl.androidUrl;
			iosUrl = appUrl.iosUrl;
		};
		//点击下载方法
		$("#submit-btn").click(function () {
			if (/micromessenger/i.test(userAgentInfo) && flag === false) {
				alert("请点击右上角选择浏览器打开");
			} else if (/aliapp/i.test(userAgentInfo) && flag === false) {
				alert("请点击右上角选择浏览器打开");
			} else if (flag === false) {
				//在android打开直接下载
				document.getElementById("submit-btn").href = androidUrl;
			} else if (flag === true) {
				//在ios中打开进入应用商店
				alert("开发中...");
			}
		});
	</script>
</body>

</html>